<script setup lang="ts">
import { ref } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "~icons/ep/refresh";
import { useRefundList } from "./utils/hook";

defineOptions({ name: "SystemOrderRefund" });

const tableRef = ref();

const {
  filterForm,
  pagination,
  tableData,
  columns,
  loading,
  refundStatusOptions,
  orderStatusOptions,
  orderRefundStatusOptions,
  handleSearch,
  handleResetFilters,
  handlePageChange,
  handleSizeChange,
  refundStatusTag,
  orderRefundStatusLabel
} = useRefundList();

const formatCurrency = (value: number | null | undefined) => {
  if (value === null || value === undefined) return "0.00";
  if (!Number.isFinite(value)) return String(value);
  return Number(value).toLocaleString("zh-CN", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
};
</script>

<template>
  <div class="system-refund-page">
    <el-form
      :inline="true"
      :model="filterForm"
      class="search-form bg-bg_color w-full pl-4 pt-3 pb-2 overflow-auto"
    >
      <el-form-item label="关键字：" prop="keyword">
        <el-input
          v-model.trim="filterForm.keyword"
          placeholder="订单号 / 售后单号"
          clearable
          class="w-[240px]!"
        />
      </el-form-item>
      <el-form-item label="订单状态：" prop="order_status">
        <el-select
          v-model="filterForm.order_status"
          placeholder="全部订单状态"
          clearable
          class="w-[180px]!"
        >
          <el-option
            v-for="item in orderStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单售后：" prop="order_refund_status">
        <el-select
          v-model="filterForm.order_refund_status"
          placeholder="全部售后进度"
          clearable
          class="w-[160px]!"
        >
          <el-option
            v-for="item in orderRefundStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="售后状态：" prop="status">
        <el-select
          v-model="filterForm.status"
          placeholder="全部售后状态"
          clearable
          class="w-[160px]!"
        >
          <el-option
            v-for="item in refundStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="handleResetFilters">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      title="售后列表"
      :columns="columns"
      :tableRef="tableRef"
      @refresh="handleSearch"
      @fullscreen="tableRef.value?.setAdaptive?.()"
    >
      <template #default="{ size, dynamicColumns }">
        <PureTable
          ref="tableRef"
          v-loading="loading"
          row-key="refund_no"
          :columns="dynamicColumns"
          :data="tableData"
          :size="size"
          :pagination="pagination"
          adaptive
          :adaptiveConfig="{ offsetBottom: 48 }"
          @page-current-change="handlePageChange"
          @page-size-change="handleSizeChange"
        >
          <template #order="{ row }">
            <div class="info-block">
              <div>
                <span class="info-block__label">订单号：</span>
                <span>{{ row.order?.order_no || "-" }}</span>
              </div>
              <div>
                <span class="info-block__label">订单状态：</span>
                <span>{{ row.order?.status_label || "-" }}</span>
              </div>
              <div class="info-block__minor">
                下单时间：{{ row.order?.create_time || "-" }}
              </div>
            </div>
          </template>

          <template #participants="{ row }">
            <div class="info-block">
              <div>
                <span class="info-block__label">买家：</span>
                <span>
                  {{ row.order?.buyer?.name || "-" }}
                  (ID: {{ row.order?.buyer?.id || "-" }}) · 组织：{{
                    row.order?.buyer?.org_id || "-"
                  }}
                </span>
              </div>
              <div>
                <span class="info-block__label">卖家：</span>
                <span>
                  {{ row.order?.seller?.name || "-" }}
                  (ID: {{ row.order?.seller?.id || "-" }}) · 组织：{{
                    row.order?.seller?.org_id || "-"
                  }}
                </span>
              </div>
              <div class="info-block__minor">
                客服：{{ row.order?.assist_user?.name || "未指派" }}
              </div>
            </div>
          </template>

          <template #amount="{ row }">
            <div class="info-block">
              <div>
                <span class="info-block__label">申请金额：</span>
                <span>¥{{ formatCurrency(row.apply_amount) }}</span>
              </div>
              <div>
                <span class="info-block__label">批准金额：</span>
                <span>¥{{ formatCurrency(row.approved_amount) }}</span>
              </div>
              <div class="info-block__minor">
                买家实退 ¥{{ formatCurrency(row.buyer_amount) }} · 平台承担 ¥{{
                  formatCurrency(row.platform_amount)
                }}。
              </div>
              <div class="info-block__minor">
                订单应付 ¥{{ formatCurrency(row.order?.buyer_paid_amount) }}，
                平台佣金 ¥{{
                  formatCurrency(row.order?.platform_commission_amount)
                }}。
              </div>
            </div>
          </template>

          <template #status="{ row }">
            <div class="status-block">
              <el-tag
                size="small"
                effect="plain"
                :type="refundStatusTag(row.status)"
              >
                {{ row.status_label || "未知" }}
              </el-tag>
              <el-tag
                size="small"
                effect="plain"
                :type="
                  row.order?.refund_status === 2
                    ? 'success'
                    : row.order?.refund_status === 1
                      ? 'warning'
                      : 'info'
                "
              >
                订单售后：{{
                  orderRefundStatusLabel(row.order?.refund_status ?? null)
                }}
              </el-tag>
            </div>
          </template>

          <template #remark="{ row }">
            <div class="remark-block">
              <div v-if="row.reason">
                <span class="info-block__label">申请原因：</span>
                <el-tooltip
                  placement="top"
                  effect="light"
                  :content="row.reason"
                >
                  <span class="remark-text">{{ row.reason }}</span>
                </el-tooltip>
              </div>
              <div v-if="row.remark" class="info-block__minor">
                审批备注：{{ row.remark }}
              </div>
              <div class="info-block__minor">
                凭证：{{ row.evidence?.length ?? 0 }} 项
              </div>
            </div>
          </template>
        </PureTable>
      </template>
    </PureTableBar>
    <p class="tip-text">
      注：售后列表源自系统售后接口，仅供运营查看退款进度及关联订单概览。
    </p>
  </div>
</template>

<style scoped>
.system-refund-page {
  padding: 12px 12px 20px;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 12px;
}

.info-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.5;
}

.info-block__label {
  color: var(--el-text-color-secondary);
  margin-right: 4px;
}

.info-block__minor {
  font-size: 12px;
  color: var(--el-text-color-placeholder);
}

.status-block {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.remark-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.remark-text {
  max-width: 260px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.tip-text {
  margin-top: 12px;
  font-size: 12px;
  color: var(--el-text-color-placeholder);
}
</style>
